<style scoped></style>

<template>
    <div>
        <div class="main-table">
            <Table border :columns="columns" :data="data"></Table>
        </div>
        <Modal
                v-model="viewModal"
                title="修改字典"
                @on-ok="viewModal = false"
                @on-cancel="viewModal = false"
                width="40%"
                :mask-closable="false">
            <Form :model="formData" :label-width="75">
                <FormItem label="字典名称">
                    <Input v-model="formData.name" clearable></Input>
                </FormItem>
                <FormItem label="状态">
                    <Select v-model="formData.status" filterable clearable>
                        <Option :value=1>在用</Option>
                        <Option :value=2>停用</Option>
                    </Select>
                </FormItem>
                <FormItem label="描述">
                    <Input v-model="formData.description" type="textarea" :rows="4" placeholder="Enter something..."></Input>
                </FormItem>
                <FormItem label="排序">
                    <Input v-model="formData.orders" clearable></Input>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="primary" @click="save">保存</Button>
                <Button type="ghost" style="margin-left: 8px" @click="viewModal = false">取消</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import util from '@/libs/util';

    export default {
        props: {
            parentid: ''
        },
        data () {
            return {
                columns: [{
                    title: '字典名称',
                    key: 'name'
                }, {
                    title: '描述',
                    key: 'description'
                }, {
                    title: '状态',
                    key: 'status',
                    render: (h, params) => {
                        let texts = '';
                        if (params.row.status === 1) {
                            texts = '在用';
                        } else if (params.row.status === 2) {
                            texts = '停用';
                        }
                        return h('div', {}, texts);
                    }
                }, {
                    title: '排序',
                    key: 'orders'
                }, {
                    title: '操作',
                    key: 'action',
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        this.showEdit(params.row);
                                    }
                                }
                            }, '修改'),
                            h('Button', {
                                props: {
                                    type: 'error',
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        this.delete(params.row.id);
                                    }
                                }
                            }, '删除')
                        ]);
                    }
                }],
                data: [],
                formData: {},
                viewModal: false
            };
        },
        mounted () {
            this.loadList();
        },
        methods: {
            loadList () {
                util.ajax.post('/base/datadictionary/list', util.toFormData({
                    parentid: this.parentid
                })).then(res => {
                    this.data = res.data.data.list;
                });
            },
            showEdit (obj) {
                let formData = {};
                for (var key in obj) {
                    formData[key] = obj[key];
                }
                this.formData = formData;
                this.viewModal = true;
            },
            save () {
                let formData = {};
                for (let key in this.formData) {
                    formData[key] = this.formData[key];
                }
                util.ajax.post('/base/datadictionary/save', util.toFormData(formData)).then(res => {
                    if (res.data.message === 'SUCCESS') {
                        this.viewModal = false;
                        this.$Message.success('保存成功！');
                        this.loadList();
                    } else {
                        this.$Message.warning(res.data.message || '未知错误！');
                    }
                });
            },
            delete (id) {
                this.$Modal.confirm({
                    title: '提示',
                    content: '<p>确定删除？</p>',
                    onOk: () => {
                        util.ajax.post('/base/datadictionary/delete', util.toFormData({
                            id: id
                        })).then(res => {
                            if (res.data.message === 'SUCCESS') {
                                this.$Message.success('删除成功！');
                                this.loadList();
                            }
                        });
                    },
                    onCancel: () => {
                    }
                });
            }
        }
    };
</script>